// Name:                        Utility
// Description:                 Useful utility classes
//
// Component:
//                                        `am-cf`
//                                        `am-f*`
//                                        `am-vertical-align`
//                                        `am-display-*`
//                                        `am-visible-*`
//                                        `am-hidden-*`
//
// ==========================================================================

/* Container */

.am-container {
  .box-sizing(border-box);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: @grid-max-width;
  .clearfix();
  //.hook-container;
}

.am-scrollable-horizontal {
  width: 100%;
  overflow-y: hidden;
  overflow-x: auto;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -webkit-overflow-scrolling: touch;
}

.am-scrollable-vertical {
  height: @utility-scrollable-height;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  resize: vertical;
}

/* clearfix */

.am-cf {
  .clearfix();
}

/* Float blocks*/

.am-fl {
  float: left;
}

.am-fr {
  float: right;
}

.am-nbfc {
  overflow: hidden;
}

.am-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Display */

.am-block {
  display: block !important;
}

.am-inline {
  display: inline !important;
}

.am-inline-block {
  display: inline-block !important;
}

.am-hide {
  display: none !important;
  visibility: hidden !important;
}



// Vertical alignment
// ========================================================================

/*
* Remove whitespace between child elements when using `inline-block`
*/

.am-vertical-align {
  font-size: 0.001px;
}

/*
* The `am-vertical-align` container needs a specific height
*/

.am-vertical-align:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

/*
* Sub-object which can have any height
* 1. Reset whitespace hack
*/

.am-vertical-align-middle,
.am-vertical-align-bottom {
  display: inline-block;
  font-size: @global-font-size; /* 1 */
  max-width: 100%;
}

.am-vertical-align-middle {
  vertical-align: middle;
}

.am-vertical-align-bottom {
  vertical-align: bottom;
}



.am-responsive-width {
  .box-sizing(border-box);
  max-width: 100%;
  height: auto;
}


// Margin & Padding
// ========================================================================

// margin mixin

.spacing-variant(@type, @dimension) {
  .am-@{type}@{dimension} {
    @{type}@{dimension}: @global-margin;
  }

  .am-margin@{dimension}-xs {
    @{type}@{dimension}: @global-margin-xs;
  }

  .am-margin@{dimension}-sm {
    @{type}@{dimension}: @global-margin-sm;
  }

  .am-margin@{dimension}-lg {
    @{type}@{dimension}: @global-margin-lg;
  }

  .am-margin@{dimension}-xl {
    @{type}@{dimension}: @global-margin-xl;
  }
}

.spacing-all-variant(@type) {
  .am-@{type} {
    @{type}: @global-margin;
  }

  .am-@{type}-xs {
    @{type}: @global-margin-xs;
  }

  .am-@{type}-sm {
    @{type}: @global-margin-sm;
  }

  .am-@{type}-lg {
    @{type}: @global-margin-lg;
  }

  .am-@{type}-xl {
    @{type}: @global-margin-xl;
  }
}

.spacing-hv-variant (@type, @dimension, @dimension1, @dimension2) {
  .am-@{type}@{dimension} {
    @{type}@{dimension1}: @global-margin;
    @{type}@{dimension2}: @global-margin;
  }

  .am-@{type}@{dimension}-xs {
    @{type}@{dimension1}: @global-margin-xs;
    @{type}@{dimension2}: @global-margin-xs;
  }

  .am-@{type}@{dimension}-sm {
    @{type}@{dimension1}: @global-margin-sm;
    @{type}@{dimension2}: @global-margin-sm;
  }

  .am-@{type}@{dimension}-lg {
    @{type}@{dimension1}: @global-margin-lg;
    @{type}@{dimension2}: @global-margin-lg;
  }

  .am-margin@{dimension}-xl {
    @{type}@{dimension1}: @global-margin-xl;
    @{type}@{dimension2}: @global-margin-xl;
  }
}


/* Margin helpers */

.spacing-all-variant(margin);
.spacing-hv-variant(margin, -horizontal, -left, -right);
.spacing-hv-variant(margin, -vertical, -top, -bottom);
.spacing-variant(margin, -top);
.spacing-variant(margin, -bottom);
.spacing-variant(margin, -left);
.spacing-variant(margin, -right);

/* Padding helpers */

.spacing-all-variant(padding);
.spacing-hv-variant(padding, -horizontal, -left, -right);
.spacing-hv-variant(padding, -vertical, -top, -bottom);
.spacing-variant(padding, -top);
.spacing-variant(padding, -bottom);
.spacing-variant(padding, -left);
.spacing-variant(padding, -right);


// Foundation Visibility HTML Classes

/* small displays */

@media @screen {
  .am-show-sm-only,
  .am-show-sm-up,
  .am-show-sm,
  .am-show-sm-down,
  .am-hide-md-only,
  .am-hide-md-up,
  .am-hide-md,
  .am-show-md-down,
  .am-hide-lg-only,
  .am-hide-lg-up,
  .am-hide-lg,
  .am-show-lg-down {
    display: inherit !important;
  }

  .am-hide-sm-only,
  .am-hide-sm-up,
  .am-hide-sm,
  .am-hide-sm-down,
  .am-show-md-only,
  .am-show-md-up,
  .am-show-md,
  .am-hide-md-down,
  .am-show-lg-only,
  .am-show-lg-up,
  .am-show-lg,
  .am-hide-lg-down {
    display: none !important;
  }
}

/* medium displays */

@media @medium-up {
  .am-hide-sm-only,
  .am-show-sm-up,
  .am-hide-sm,
  .am-hide-sm-down,
  .am-show-md-only,
  .am-show-md-up,
  .am-show-md,
  .am-show-md-down,
  .am-hide-lg-only,
  .am-hide-lg-up,
  .am-hide-lg,
  .am-show-lg-down {
    display: inherit !important;
  }

  .am-show-sm-only,
  .am-hide-sm-up,
  .am-show-sm,
  .am-show-sm-down,
  .am-hide-md-only,
  .am-hide-md-up,
  .am-hide-md,
  .am-hide-md-down,
  .am-show-lg-only,
  .am-show-lg-up,
  .am-show-lg,
  .am-hide-lg-down {
    display: none !important;
  }
}

/* large displays */

@media @large-up {
  .am-hide-sm-only,
  .am-show-sm-up,
  .am-hide-sm,
  .am-hide-sm-down,
  .am-hide-md-only,
  .am-show-md-up,
  .am-hide-md,
  .am-hide-md-down,
  .am-show-lg-only,
  .am-show-lg-up,
  .am-show-lg,
  .am-show-lg-down {
    display: inherit !important;
  }

  .am-show-sm-only,
  .am-hide-sm-up,
  .am-show-sm,
  .am-show-sm-down,
  .am-show-md-only,
  .am-hide-md-up,
  .am-show-md,
  .am-show-md-down,
  .am-hide-lg-only,
  .am-hide-lg-up,
  .am-hide-lg,
  .am-hide-lg-down {
    display: none !important;
  }
}

@media @landscape {
  .am-show-landscape,
  .am-hide-portrait {
    display: inherit !important;
  }

  .am-hide-landscape,
  .am-show-portrait {
    display: none !important;
  }
}

@media @portrait {
  .am-show-portrait,
  .am-hide-landscape {
    display: inherit !important;
  }

  .am-hide-portrait,
  .am-show-landscape {
    display: none !important;
  }
}


// ========================================================================
// Text Utility
// ========================================================================

// Font family
// ------------------------------------------------------------------------

.am-sans-serif {
  font-family: @font-family-sans-serif;
}

.am-serif {
  font-family: @font-family-serif;
}

.am-kai {
  font-family: @font-family-kai;
}

.am-monospace {
  font-family: @font-family-monospace;
}


// Text color
// ------------------------------------------------------------------------

.am-text-primary {
  color: @global-primary;
}

.am-text-secondary {
  color: @global-secondary;
}

.am-text-success {
  color: @global-success;
}

.am-text-warning {
  color: @global-warning;
}

.am-text-danger {
  color: @global-danger;
}


.am-link-muted {
  color: #666;
  a {
    color: #666;
  }

  &:hover,
  & a:hover {
    color: #555;
  }
}


/* Text size */
.am-text-default {
  font-size: @base-font-size;
}

/*
.am-text-xxs {
  font-size: @font-size-xxs;
}
*/

.am-text-xs {
  font-size: @font-size-xs;
}

.am-text-sm {
  font-size: @font-size-sm;
}

.am-text-lg {
  font-size: @font-size-lg;
}

.am-text-xl {
  font-size: @font-size-xl;
}

.am-text-xxl {
  font-size: @font-size-xxl;
}

.am-text-xxxl {
  font-size: @font-size-xxl;
}



/**
 * Text overflow
 * Requires inline-block or block for proper styling
 */

.am-ellipsis,
.am-text-truncate {
  word-wrap: normal; /* for IE */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.am-text-break {
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

.am-text-nowrap {
  white-space: nowrap;
}


[class*='am-align-'] {
  margin-bottom: 1rem;
}

.am-align-left {
  margin-right: 1rem;
  float: left;
}

.am-align-right {
  margin-left: 1rem;
  float: right;
}

/** Only display content to screen readers
 * See: http://a11yproject.com/posts/how-to-hide-content/
 */

.am-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}


/* Text Image Replacement */

.am-text-ir {
  .text-hide();
}


/* Text align */

.am-text-left {
  text-align: left !important;
}

.am-text-right {
  text-align: right !important;
}

.am-text-center {
  text-align: center !important;
}

.am-text-justify {
  text-align: justify !important;
}

@media @small-only {
  .am-sm-only-text-left {
    text-align: left !important;
  }

  .am-sm-only-text-right {
    text-align: right !important;
  }

  .am-sm-only-text-center {
    text-align: center !important;
  }

  .am-sm-only-text-justify {
    text-align: justify !important;
  }
}

@media @screen {
  .am-sm-text-left {
    text-align: left !important;
  }

  .am-sm-text-right {
    text-align: right !important;
  }

  .am-sm-text-center {
    text-align: center !important;
  }

  .am-sm-text-justify {
    text-align: justify !important;
  }
}

@media @medium-only {
  .am-md-only-text-left {
    text-align: left !important;
  }

  .am-md-only-text-right {
    text-align: right !important;
  }

  .am-md-only-text-center {
    text-align: center !important;
  }

  .am-md-only-text-justify {
    text-align: justify !important;
  }
}

@media @medium-up {
  .am-md-text-left {
    text-align: left !important;
  }

  .am-md-text-right {
    text-align: right !important;
  }

  .am-md-text-center {
    text-align: center !important;
  }

  .am-md-text-justify {
    text-align: justify !important;
  }
}

@media @large-up {
  .am-lg-text-left {
    text-align: left !important;
  }

  .am-lg-text-right {
    text-align: right !important;
  }

  .am-lg-text-center {
    text-align: center !important;
  }

  .am-lg-text-justify {
    text-align: justify !important;
  }
}

.am-text-top {
  vertical-align: top !important;
}

.am-text-middle {
  vertical-align: middle !important;
}

.am-text-bottom {
  vertical-align: bottom !important;
}
